<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>echarts地图</title>
    <script src="../js/data.js"></script>
    <script src="../js/vue2.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/jquery.min.js"></script>
</head>

<body>
<div class="viewport" id="home">
    <div class="echarts" ref="echarts" id="echarts"></div>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#home",
        data() {
            return {
                list: [],
            }
        },
        watch: {},
        mounted() {
            setTimeout(() => {
                this.drawechartmap()
            }, 100)
        },
        methods: {
            drawechartmap() {
                var that = this
                var geoCoordMap = {}
                window.addEventListener('resize', this.drawechartmap)
                var myChart = echarts.init(this.$refs.echarts)
                var nameMap = '地图数据';
                echarts.registerMap(nameMap, gdMap)
                var mapFeatures = echarts.getMap(nameMap).geoJson.features;
                mapFeatures.forEach(function (v, index) {
                    geoCoordMap[v.properties.name] = v.properties.center;
                });
                var option = {
                    geo: {
                        map: nameMap,
                        zoom: 1,
                        label: {
                            normal: {
                                show: false,
                                color: '#000000'
                            },
                            emphasis: {
                                show: false,
                                color: '#292929'
                            }
                        },
                        roam: false,
                        itemStyle: {
                            normal: {
                                areaColor: '#00338F'
                            },
                        }
                    },
                    series: [
                        {
                            type: 'map',
                            mapType: nameMap,
                            map: nameMap,
                            itemStyle: {
                                normal: {
                                    areaColor: '#00338F',
                                    borderColor: '#0094D6',
                                    borderWidth: 0.5,
                                    label: {
                                        show: false,
                                    }
                                },
                                emphasis: {
                                    areaColor: '#FFBB07',
                                    borderColor: '#0094D6',
                                    areaStyle: '#FFBB07',
                                    label: {
                                        show: false,
                                    }
                                }
                            },
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            }
                        },
                        {
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            // symbol: 'pin',
                            symbol: function (value, params) {
                                return 'image://'
                            },
                            symbolSize: [24, 35],
                            symbolOffset: [-0, -0],
                            hoverAnimation: true,
                            itemStyle: {
                                normal: {
                                    color: 'pink' // 标志颜色
                                }
                            },
                            zlevel: 6,
                            data: []
                        },
                        {
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            label: {
                                normal: {
                                    show: true,
                                    formatter: function (params) {
                                        var name = params.name
                                        var value = params.data.datas
                                        var text = `{fline|累计车位数：}\n{tline|${params.data.number}}`
                                        return text
                                    },
                                    color: '#fff',
                                    rich: {
                                        fline: {
                                            padding: [0, 10, 5, 15],
                                            color: '#fff',
                                            fontSize: 12,
                                            fontWeight: 400,
                                        },
                                        tline: {
                                            padding: [5, 15],
                                            color: '#fff',
                                            fontSize: 16,
                                            fontFamily: 'DIN',
                                            fontWeight: 'bold'
                                        },
                                    },
                                },
                                emphasis: {
                                    show: true,
                                },
                            },
                            itemStyle: {
                                color: '#00FFF6',
                            },
                            symbol: function (value, params) {
                                return 'image://'
                            },
                            symbolSize: [118, 64],
                            symbolOffset: [70, 5],
                            z: 999,
                            data: [],
                        }
                    ]
                }
                myChart.resize()
                myChart.setOption(option)
                myChart.on('click', function (params) {
                    var valarr = geoCoordMap[params.name]
                    option.series[1].data = [{
                        name: params.name,
                        value: valarr,
                        number: 1354,
                    }]
                    option.series[2].data = [{
                        name: params.name,
                        value: valarr,
                        number: 1354,
                    }]
                    myChart.setOption(option, false)
                })
            }
        }
    })
</script>
</html>
<style>
    html, body {
        padding: 0;
        margin: 0;
    }

    #home {
        width: 100%;
        height: 100%;
        background: #0d1551;
        position: fixed;
    }

    .echarts {
        width: 100%;
        height: 100%;
        background: #0d1551;
        position: fixed;
    }

</style>
